<template>
    <div>
        <!-- 顶部导航栏 -->
        <div class="CP_Top">
            <div class="BookCRMBcontainer">
                <span class="iconfont icon-zuojiantou" @click="$router.go(-1)"></span>
                <div class="pagename">分类</div>
            </div>
        </div>
        <!-- 必看爽文 -->
        <div class="AllBox">
            <div class="BookCRMBcontainer">
                <!-- <div class="AllContent" v-for="item in cplist" :key="item.id"> -->
                <router-link class="AllContent" tag="div" v-for="item in cplist" :key="item.id" :to="'/TheWorkDetails?id='+item.id">
                    <div class="AllImg">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="AllText">
                        <div class="ATname">
                            <span class="NA">{{item.text}}</span>
                            <span>9.3<span class="small">分</span></span>
                        </div>
                        <div class="ATintroduce">
                            <p class="ATintroduceText">{{item.d}}</p>
                        </div>
                        <div class="ATwriter">
                            <span>{{item.author}}</span>
                            <span class="rq">545万人气</span>
                        </div>
                    </div>
                </router-link>
                <!-- </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import {getSearchSearchHint} from "../api/search";
export default {
    data(){
        return{
            text:null,
            cplist:[],
        }
    },
    methods:{
        getSearchSearchHintFun(text){
            getSearchSearchHint({search:text}).then(data=>{
                this.cplist = data.words.w;
                console.log(this.cplist)
            })
        }
    },
    created(){
        this.text = this.$route.query.text;
        this.getSearchSearchHintFun(this.text);
    }
}
</script>

<style lang="less">
.BookCRMBcontainer{
    width: 89%;
    margin: 0px auto;
}
.AllTitle{
    line-height: 65px;
    font-weight: bold;
    font-size: 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .AllTbtn{
        line-height: 24px;
        font-size: 13px;
        overflow: hidden;
        border-radius: 20px;
        background-color: #eee;
        text-align: center;
        span{
            text-align: center;
            padding: 8px 12px;
            color: #aaa;
        }
        span.ck{
            color: #333;
            background-color: #fed524;
            border-radius: 20px;
        }
    }
}
.AllBox{
    margin: 10px 0px;
    background-color: #fff;
    padding-top: 70px;
    .BookCRMBcontainer{
        .AllContent{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
            .AllImg{
                width: 75px;
                height: 90px;
                background-color: lightgreen;
                border-radius: 4px;
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
            .AllText{
                width: 75%;
                .ATname{
                    display: flex;
                    justify-content: space-between;
                    line-height: 24px;
                    span{
                        color: #fba001;
                        font-weight: bold;
                        span.small{
                            font-size: 12px;
                            font-weight: normal;
                        }
                    }
                    span.NA{
                        color: black;
                    }
                }
                .ATintroduce{
                    width: 100%;
                    p.ATintroduceText{
                        height: 40px;
                        color:#aaa ;
                        font-size: 14px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                }
                .ATwriter{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    line-height: 24px;
                    span{
                        font-size: 14px;
                        color: #aaa;
                    }
                    span.rq{
                        color: #c2812e;
                        font-size: 12px;
                        background-color: #ffe77c;
                        padding: 0px 5px;
                        line-height: 18px;
                    }
                }
                .ATTag{
                    font-size: 14px;
                    color: #aaa;
                }
            }
        }
    }
}
.CP_Top{
    padding: 10px 0px;
    background-color: #fff;
    position: fixed;
    top: 0px;
    left: -5px;
    width: 100%;
    box-shadow: 0px 0px 3px #eee;
    .BookCRMBcontainer{
        position: relative;
        text-align: center;
        span{
            position: absolute;
            left: 0px;
            top: 3px;
            font-size: 24px;
        }
        .pagename{
            line-height: 30px;
            font-size: 18px;
            font-weight: bold;
        }
    }
}
</style>